<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="container-breadcrumb">
    <div class="row ">
        <div class="col-sm-12">
            <ol class="breadcrumb">
                <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
                <li class="active"><s:message text="会员统计"/></li>
            </ol>
        </div>
    </div>
    <!--/.row-->
</div>

<div id="container-content" class="container-content">
    <div class="panel panel-default report-container">
        <div class="panel-heading">
            <div class="col-md-2">会员基本信息统计</div>
            <div>
                <button type="button" class="btn btn-primary pull-right" id="excelCustomerPhone">导出手机号</button>
                <button type="button" class="btn btn-warning pull-right" id="but">手机号显半</button>
            </div>
        </div>
        <div class="panel-body">
            <form:form action="${pageContext.request.contextPath}/customer/customersInfo"
                       modelAttribute="customerAttribute" method="get"
                       cssClass="row products-condition" id="myForm">
                <div class="form-inline col-sm-12">
                    <div class="form-group">
                        <label>会员ID&nbsp;</label>
                        <form:input id="id" path="id" cssClass="form-control"/>
                    </div>
                    <div class="form-group">
                        <label>用户名&nbsp;</label>
                        <form:input id="nick" path="telphone" cssClass="form-control"/>
                    </div>

                    <div class="form-group">
                        <label>会员等级</label>
                        <form:select path="level" cssClass="form-control">
                            <form:option value="0" label="请选择"/>
                            <form:option value="1" label="1"/>
                            <form:option value="2" label="2"/>
                        </form:select>
                    </div>
                    <div class="form-group">
                        <label>渠道来源</label>
                        <form:select path="channel" cssClass="form-control">
                            <form:option value="" label="全部"/>
                            <form:option value="default_app" label="default_app"/>
                            <form:option value="xiaomi" label="xiaomi"/>
                            <form:option value="baidu" label="baidu"/>
                            <form:option value="ola" label="ola"/>
                            <form:option value="olb" label="olb"/>
                            <form:option value="olc" label="olc"/>
                        </form:select>
                    </div>
                    <div class="form-group">
                        <label>设备类型</label>
                        <form:select path="device" cssClass="form-control">
                            <form:option value="0" label="全部"/>
                            <form:option value="1" label="Android"/>
                            <form:option value="2" label="IOS"/>
                        </form:select>
                    </div>
                </div>
                <div class="form-inline col-sm-12">

                    <div class="form-group">
                        <label>会员昵称&nbsp;</label>
                        <form:input id="nickId" path="nick" cssClass="form-control"/>
                    </div>

                    <label>注册时间</label>

                    <div class="form-group">
                        <div id="datetimepicker_start" class="input-group date">
                            <form:input id="startTimeDate" cssClass="form-control" path="startTime"
                                        data-date-format="YYYY-MM-DD"/>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                    至
                    <div class="form-group">
                        <div id="datetimepicker_end" class="input-group date">
                            <form:input id="endTimeDate" cssClass="form-control" path="endTime"
                                        data-date-format="YYYY-MM-DD"/>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>排序</label>
                        <form:select path="sort" cssClass="form-control">
                            <form:option value="0" label="默认"/>
                            <form:option value="1" label="按领取数量倒序"/>
                            <form:option value="2" label="按领取数量正序"/>
                        </form:select>
                    </div>

                    <div class="form-group">
                        <button id="btn_search" type="button" class="btn btn-default">查询</button>
                    </div>
                </div>
                <form:hidden path="currentPage" id="currentPage"/>
                <form:hidden path="pageSize" id="pageSize"/>
                <input id="total" type="hidden" value="${dataList.totalCount}"/>
            </form:form>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>会员ID</th>
                    <th>渠道来源</th>
                    <th>用户名</th>
                    <th>会员昵称</th>
                    <th>等级</th>
                    <th>可用积分</th>
                    <th>可用余额</th>
                    <th>注册时间</th>
                    <th>领取数量</th>
                    <th>设备类型</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="myTable">
                <c:forEach items="${dataList.data}" var="data">
                    <tr>
                        <td>${data.id}</td>
                        <td>${data.channel}</td>
                        <td class="yhm">
                            <span>${data.telphone}</span>
                            <input type="hidden" id="yhm_${data.id}" value="${data.telphone}"/>
                        </td>
                        <td>${data.nick}</td>
                        <td>${data.level}</td>
                        <td>${data.integral}</td>
                        <td>${data.balance}</td>
                        <td>${data.dateCreated}</td>
                        <td>${data.getNumber}</td>
                        <td>${data.deviceToken}</td>
                        <td>
                            <button data-id="${data.id}" type="button"
                                    class="btn btn-default btn-xs contactInformation">联系方式
                            </button>
                            <button data-id="${data.id}" type="button" class="btn btn-default btn-xs logRecord">日志记录
                            </button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <div class="row">
                <div id="paginationInfo" class="col-md-4 pagination-info"></div>
                <div id="pagination" class="col-md-8"></div>
            </div>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/resources/common/js/bootstrap-paginator.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/common/paginator.js"></script>
<script>
    var flag = "show";
    $(document).ready(function () {
        $("#but").bind("click", function () {
            if (flag == "show") {

                $(".yhm").each(function () {
                    var find = $(this).find("input");
                    var $value = find.val();
                    if ($value != '') {
                        var s1 = $value.substring(0, 3);
                        var s3 = $value.substring(7, 11);
                        var ss = s1 + "****" + s3;
                        $(this).find("span").text(ss);
                    }
                });
                flag = "hide"
            } else {

                $(".yhm").each(function () {
                    var find = $(this).find("input");
                    var $value = find.val();
                    $(this).find("span").text($value);
                });
                flag = "show";
            }
        });

        $('#datetimepicker_start').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh', //汉化
            pickTime: false,
            autoclose: true
        });
        $('#datetimepicker_end').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh', //汉化
            pickTime: false,
            autoclose: true
        });

        $("#btn_search").click(function () {
            $("#currentPage").val("1");
            $("#myForm").submit();
        });

        $(".contactInformation").click(function () {
            var id = $(this).data("id");
            window.location.href = "${pageContext.request.contextPath}/customer/customerContactInfo?id=" + id;
        });

        $(".logRecord").click(function () {
            var id = $(this).data("id");
            window.location.href = "${pageContext.request.contextPath}/customer/customerOpLog?id=" + id;
        });

        //导出用户电话
        $("#excelCustomerPhone").click(function () {
            var form = $("#myForm");
            form.attr("action", "${pageContext.request.contextPath}/customer/exportCustomerPhoneExcel");
            form.submit();
            form.attr("action", "${pageContext.request.contextPath}/customer/customersInfo");

        });
    });
</script>
